<template>
  <div>
    <div class="padding-top-20 padding-left-right-20 flex align-center">
      <div class="contract-box">
        <el-select v-model="contractCode" placeholder="请选择合同" filterable @change="alterContract">
          <el-option v-for="item in contractList" :key="item.contractCode" :label="item.contractName" :value="item.contractCode" />
        </el-select>
      </div>

      <div class="margin-left-20">
        <span class="font-size-18 font-weight-600">履行时间：</span>
        <span class="font-size-18 font-weight-600">{{ contractObj.contractBeginDate | formatDateTime('YYYY-MM-DD') }}至{{ contractObj.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
      </div>
    </div>

    <bill ref="bill"></bill>
  </div>
</template>

<script>
  import { apiBusinessContractList } from '../../../api/contract';

  import Bill from './bill.vue';

  export default {
    name: 'bill-all',
    data() {
      return {
        contractList: [],
        contractCode: '',
        contractObj: {},
      };
    },

    methods: {
      alterContract() {
        this.getContractObj();
        this.$refs.bill.getDataSource('', this.contractCode);
      },

      //合同列表
      async getapiBusinessContractList() {
        let res = await apiBusinessContractList({
          projectKey: localStorage.getItem('projectKey'),
          ifNotFilterTime: true,
          contractStatusList: [2, 4, 5],
          assetCodeList:this.$route.query.assetCode ? [this.$route.query.assetCode] : null
        });
        this.contractCode = this.$route.query.contractCode;
        this.contractList = res.rows || [];
        this.getContractObj();
      },

      getContractObj() {
        this.contractObj = this.contractList.find(item => item.contractCode == this.contractCode) || {};
      },
    },

    mounted() {
      this.getapiBusinessContractList();
    },

    components: { Bill },
  };
</script>

<style lang="scss" scoped>
  .contract-box {
    width: 500px;
  }
</style>
